<template>
<div class="edit-address">
    <div class="name">
        <span>收货人</span>
        <input type="text" placeholder="名字" v-model="addrList.name">
    </div>
    <div class="phone">
        <span>手机号码</span>
        <input type="number" placeholder="请输入手机号" v-model="addrList.phone">
    </div>
    <div class="addr">
        <van-field
            v-model="addrList.addr"
            is-link
            readonly
            name="area"
            label="所在区域"
            placeholder="点击选择省市区"
            @click="showArea = true"
            />
            
    </div>
    <div class="detailAddr">
            <span>详细地址</span>
            <textarea placeholder="请输入详细地址" v-model="addrList.detailAddr"/>
    </div>
    <button @click="editEvt">修&nbsp;&nbsp;&nbsp;改</button>

    <!-- 省市区选择 -->
    <van-popup v-model:show="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="define"
                @cancel="showArea = false"
            />
        </van-popup>
</div>
</template>


<script setup>
import { ref,reactive } from "vue"
import { useRoute,useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { showSuccessToast } from 'vant'
import { areaList } from '@vant/area-data'

const route = useRoute()
const router = useRouter()
const store = useStore()

let showArea = ref(false)

//地址列表
let addrList = reactive({
    id:route.query.id,
    name:route.query.name,
    phone:route.query.phone,
    addr:route.query.addr,
    detailAddr:route.query.detailAddr,
    check:route.query.check
})

//确定
function define(row){
    let { selectedOptions } = row
    addrList.addr = selectedOptions.map(item=>item.text).join('-')
    // console.log(addrList.addr);
    showArea.value = false
}

//修改数据
function editEvt(){
    store.commit('loginModule/editAddress',addrList)
    showSuccessToast('修改成功')
    router.go(-1)
    // console.log(addrList);
}

</script>


<style lang="less" scoped>

@import '../../style/common.less';

@inputWidth:100px;
@inputHeight:260px;
@inputRadius:14px;
    .edit-address{
        width: 100%;
        height: 400px;
        padding: 2vh 10px 10vh;
        >.name{
            display: flex;
            justify-content: space-around;
            padding: 0 10px;
            align-items: center;
            margin-bottom: 18px;
            >span{
                display: block;
                width: @inputWidth;
                font-size: .8rem;
            }
            >input{
                display: block;
                width: @inputHeight;
                height: 6vh;
                border-radius: @inputRadius;
                background: @g3;
                font-size: .7rem;
                border: none;
                margin-left: 20px;
                padding: 0 0 0 20px;
            }
        }
        >.phone{
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 14px;
            margin-bottom: 18px;
            >span{
                display: block;
                width: @inputWidth;
                font-size: .8rem;
            }
            >input{
                display: block;
                width: @inputHeight;
                height: 6vh;
                border-radius: @inputRadius;
                background: @g3;
                font-size: .7rem;
                border: none;
                margin-left: 20px;
                padding: 0 0 0 20px;
            }
        }
        >.detailAddr{
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 14px;
            margin-top: 18px;
            >span{
                display: block;
                width: @inputWidth;
                font-size: .8rem;
            }
            >textarea{
                display: block;
                width: @inputHeight;
                height: 10vh;
                border-radius: @inputRadius;
                background: @g3;
                font-size: .7rem;
                border: none;
                margin-left: 20px;
                padding: 6px 20px;
            }
        }
        >button{
            display: block;
            margin: 38px auto;
            border: none;
            width: 80%;
            height: 6vh;
            border-radius: 20px;
            color: @g1;
            background: #ee0a24;
        }

    }

    /deep/#van-field-1-label{
        font-size: .8rem;
    }

</style>